<style type="text/css">
  .v-list .v-list-item--nav:not(:only-child) {
      margin-bottom: 0px !important;
  }
  .v-list{
    cursor: pointer;
  }
  .l-name{
    font-size: 12px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
  }
</style>
<template>
  <v-card>
    <v-layout>
      <v-navigation-drawer theme="dark" permanent rail >
        <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/75.jpg"  ></v-list-item>
        <v-divider></v-divider>
        <v-list density="compact" nav >
          <v-list-item prepend-icon="mdi-view-dashboard" value="dashboard" @click="setList(1)" ></v-list-item>
          <div class="l-name">广场</div>
          <v-list-item prepend-icon="mdi-forum" value="messages" @click="setList(2)"></v-list-item>
          <div class="l-name">药材</div>
          <v-list-item prepend-icon="mdi-forum" value="messages3" @click="setList(3)"></v-list-item>
          <div class="l-name">药方</div>
          <v-list-item prepend-icon="mdi-forum" value="messages4" @click="setList(4)"></v-list-item>
          <div class="l-name">发文</div>
        </v-list>
      </v-navigation-drawer>

      <v-navigation-drawer :permanent="permanent" >
        <v-list >
          <v-list-item v-for="(e,i  ) in list" :key="i" :title="e.title" :value="e.value"></v-list-item>
        </v-list>
      </v-navigation-drawer>

      <v-main style="height: 100vh">
        <v-toolbar dark prominent>
          <v-app-bar-nav-icon @click="alert(1)"></v-app-bar-nav-icon>
          <v-toolbar-title>Vuetify</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon><v-icon>mdi-export</v-icon> </v-btn>
        </v-toolbar>
        <div style="padding: 10px 20px;">
          <router-view />
        </div>
      </v-main>
    </v-layout>
  </v-card>
</template>
<script>
  var barMap = {
    1:[],
    2:[{title:'home',value:'home'},{title:'home1',value:'home1'},],
    3:[{title:'home3',value:'home3'},{title:'home31',value:'home32'},],
    4:[],
  }
  export default {
    data: () => {
       return {
         list:barMap[1],
         permanent:false,
       }
    },
    methods:{
      alert(){
       if(this.list.length){
         this.permanent = !this.permanent
       }
      },
      setList(i){
       this.list = barMap[i]
       this.permanent = this.list.length >0;
       // 路由跳转怎么操作
       var pathMap ={
         1:'/page1',
         2:'/page2',
         3:'/page3',
         4:'/page4',
       }
       this.$router.push(pathMap[i])
      }
    }
  }
</script>
